<template>
	<view class="main">
		<view class="foothand" @click="gzbtn" v-show="this.wechatLogo">
			点击关注公众号，接收充电消息通知
		</view>
		<tou_hand handtype='false' ref="mainindex"></tou_hand>
		<navigator url="../records_consumption/records_consumption" hover-class="none">
			<van-notice-bar :scrollable="true" left-icon="volume-o">
				<!-- 亲爱的充电柜用户，因网络原因无法打开柜门,请前往个人中心-查看更多-消费记录,查看开柜密码打开柜门 -->
			</van-notice-bar>
		</navigator>
		<view class="hand" v-show="showlist.length!=0">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading"  :finished="finished" finished-text="没有更多了" @load="loadMore">
				<van-cell v-for="(item,index) in showlist" :key="index" @click="onDetail(item.id,item.deviceId)">
					<view class="show">
						<view class="showhand">
							<view class="hleft">
								<span v-show='item.deviceId.substr(-2,1)!=9'>充电桩编号<span style='color: #007AFF;'>（桩）</span>：{{item.code}}</span>
								<span v-show='item.deviceId.substr(-2,1)==9'>充电柜编号<span style='color: #07C160;'>（柜）</span>：{{item.code}}</span>
							</view>
							<view class="hright">充电中</view>
						</view>
						<view class="showfoot">
							<view class="fleft">
								订单编号：{{item.orderNum}}
							</view>
							<view class="fleft">
								小区名称：{{item.projectName}}
							</view>
							<view class="fleft">
								开始时间：{{item.startTime}}
							</view>
							<view class="fleft" v-show="item.spareVar5==1" style="display: flex;align-items: center;">
								充电守护：<view style='color: #8DC321;'>生效中</view><view style="color: #FFA02E;margin-left: 20upx;" @click='xysm'>《协议说明》</view><view class="fleftson" @click="lxkf(item.orderNum)" v-show="White==1">客服</view>
							</view>
						</view>
					</view>
				</van-cell>
			</van-list>
			</van-pull-refresh>
		</view>
		<view class="notap" v-show="showlist.length==0">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//zwdd.png"></image>
			暂无订单
		</view>
		<van-popup v-model="gzshow">
			<view class="gztan" >
				<view class="gztanimg">
					<img :src="wechaturl"></img>
					<!-- <img src='https://qiniu.jxyutuo.com/yanqin/tabBarimg//00000006.jpg'></img> -->
				</view>
				<view class="gztantxt">
					长按识别二维码，关注公众号，接收充电消息通知
				</view>
			</view>
		</van-popup>
		<view class="kf">
			<van-popup v-model="kfshow">
				<view class="kfmap">
					<view class="one" @click="gkf">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//kfclose.png"></image>
					</view>
					<view class="two">专属客服</view>
					<view class="three">您可以通过以下方式联系到我哦</view>
					<view class="four">
						<view class="fourfirst" @click="callphone" v-show="xylist.phoneStatuss==1">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//kfphone.png"></image>
							电话客服
						</view>
						<view class="fourthired" v-show="xylist.imgStatuss==1&&xylist.phoneStatuss==1"></view>
						<view class="foursecond" @click="zaixian" v-show="xylist.imgStatuss==1">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//kfwx.png"></image>
							在线客服
						</view>
					</view>
				</view>
			</van-popup>
			<van-popup v-model="wxtcshow">
				<view class="kfmap">
					<view class="one" @click="gwx">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//kfclose.png"></image>
					</view>
					<view class="five">
						<image :src='xylist.wechatImg'></image>
					</view>
					<view class="six">
						<view>关注公众号</view>
						<view>即可享受专属客服在线咨询服务</view>
					</view>
				</view>
			</van-popup>
			
			<van-popup :show="tipbindshow">
				<view class="tishi">
					<view class="tstou">提示</view>
					<view class="tsnei">
						请先扫设备二维码绑定小区后再操作。
					</view>
					<view class="kbtn" @click="toSmcharging">
						确认
					</view>
				</view>
			</van-popup>
			
		</view>
		<tabBar tab01="1"></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import tou_hand from '../../components/tou_hand/tou_hand.vue'
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
			tabBar,
			tou_hand
		},
		data() {
			return {
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist: [], //正在充电的设备列表数据
				gzshow:false,
				wechatLogo:'',//是否显示公众号二维码
				wechaturl:'',//是否显示公众号二维码
				xylist:'',
				kfshow:false,
				wxtcshow:false,
				btnshow:false,
				consumNo:'',
				White:0,
				tipbindshow: false, //提示绑定开关
			}
		},
		onLoad() {
			this.safeWhite()
		},
		onShow() {
			if(uni.hideHomeButton){
				uni.hideHomeButton();
			}
			this.btnshow=false
			this.wechatLogo = uni.getStorageSync('wechat_view').logo;
			this.wechaturl = uni.getStorageSync('wechat_view').qrcode;
			this.show();
			this.showlist = [];
			this.onRefresh();
			this.usertap();
		},
		methods: {
			usertap(){
				this.$base.request('user/userInfo', 'GET')
					.then(res => {
						if (res.data.code == 200) {
							this.userlist = res.data.data
							uni.setStorageSync('userId', this.userlist.id)
							this.userlist.id = this.pad(this.userlist.id, 8)
							this.projectPhone = this.userlist.projectPhone
							uni.setStorageSync('user', this.userlist)
							uni.setStorageSync('phone', this.userlist.phone)
							uni.setStorageSync('Name', this.userlist.realName)
							
							if (res.data.data.subscribe == 0) {
								// uni.redirectTo({
								// 	url: '/pages/qr_code/qr_code'
								// })
								// return
							}
							if (res.data.data.projectId == 0) {
								this.tipbindshow = true;
								return
							}
						}
					})
					.catch(err => {
				
					})
			},
			pad(num, n) {
			  var len = num.toString().length;
			  while(len < n) {
			    num = "0" + num;
			    len++;
			  }
			  return num;
			},
			onDetail(id,deviceId) {
				if(this.btnshow==false){
					var ctype=''
					if(deviceId.substr(-2,1)==9){
						ctype=1
					}else{
						ctype=0
					}
					uni.navigateTo({
						url: '../chargingzhong_detail/chargingzhong_detail?id='+id+'&codetype='+ctype
					})
				}
				
			},
			show() {
				this.usertap()
			},
			// 分页
			loadMore() {
				if (this.refreshing) {
				  this.showlist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum: that.pageNum,
					pageSize: that.pageSize
				}
				that.loading = true;
				that.$base.request('charging/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			gzbtn(){
				this.gzshow=true
			},
			xyshow(){
				this.$base.request('charge/safe/marketing', 'GET')
					.then(res => {
						if(res.data.code==200){
							this.xylist=res.data.data
							if(this.xylist.wechatImg){
								this.xylist.wechatImg=Config.imgapi+this.xylist.wechatImg
							}
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			},
			lxkf(orderNum){
				this.consumNo=orderNum
				this.xyshow()
				this.kfshow=true
				this.btnshow=true
			},
			//关闭客服弹窗
			gkf(){
				this.btnshow=false
				this.kfshow=false
			},
			//关闭公众号弹窗
			gwx(){
				this.btnshow=false
				this.wxtcshow=false
			},
			//获取用户所在小区运营商是否开启白名单
			safeWhite(){
				this.$base.request('user/safeWhite', 'GET')
					.then(res => {
						if(res.data.code==200){
							this.White=res.data.data
						}else{
							this.White=0
						}
					})
					.catch(err => {
				
					})
			},
			//打开公众号弹窗
			zaixian(){
				this.btnshow=true
				if(this.xylist.imgStatuss==1){
					Dialog.confirm({
						title: '提示',
						message: '确认联系在线客服？',
					}).then(() => {
						let data={
							inletType:'detail',
							consumNo:this.consumNo
						}
						uni.showLoading({
							title: '请稍候',
							mask: true
						})
						this.$base.request('user/customer/add', 'POST',data)
							.then(res => {
								uni.hideLoading()
								if(res.data.code==200){
									this.wxtcshow=true
									this.kfshow=false
								}else{
									this.$toast.fail(res.data.msg)
									return
								}
							})
							.catch(err => {
						
							})
					}).catch(() => {
						return
						// on cancel
					});
				}else{
					this.$toast.fail('在线客服尚未启用')
				}
				
			},
			//拨打电话
			callphone(){
				this.btnshow=false
				if(this.xylist.phoneStatuss==1){
					Dialog.confirm({
						title: '提示',
						message: '确认拨打电话客服',
					}).then(() => {
						let data={
							inletType:'detail',
							consumNo:this.consumNo
						}
						uni.showLoading({
							title: '请稍候',
							mask: true
						})
						this.$base.request('user/customer/add', 'POST',data)
							.then(res => {
								uni.hideLoading()
								if(res.data.code==200){
									window.location.href = 'tel:'+this.xylist.phone;
									this.kfshow=false
								}else{
									this.$toast.fail(res.data.msg)
									return
								}
							})
							.catch(err => {
						
							})
					}).catch(() => {
						return
						// on cancel
					});
				}else{
					this.$toast.fail('电话客服尚未启用')
				}
				
			},
			//协议说明
			xysm(){
				this.btnshow=true
				uni.navigateTo({
					url:'/pages/protocol_specification/protocol_specification'
				})
			},
			//返回首页
			toSmcharging(){
				uni.reLaunch({
					url:'/pages/smcharging/smcharging'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color:#2A3034
	}
	.main {
		width: 100%;
		height: 100vh;
		background-color: #2A3034;
		margin-bottom: 140upx;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		/deep/.van-cell{
			background-color: #2A3034;
		}
		/deep/.van-cell:not(:last-child)::after{
			border-bottom: 0upx;
		}
		/deep/.van-notice-bar {
			background-color: #2A3034;
			color: #FFFFFF;
			padding: 0 46upx;
			margin-top: 70upx;
		}
		.foothand{
			position: absolute;
			z-index: 9;
			top: 0upx;
			left: 5%;
			width: 90%;
			background: linear-gradient(180deg, #8BC21C 0%, #A8D628 100%);
			border-radius: 24upx;
			padding: 10upx 24upx;
			box-sizing: border-box;
			margin-top: 30upx;
			color: #fff;
		}
		.gztan{
			width: 650upx;
			background-color: #FFFFFF;
			text-align: center;
			padding: 70upx 0;
			.gztanimg{
				width: 350upx;
				height: 350upx;
				margin: 0 auto;
				img{
					width: 350upx;
					height: 350upx;
				}
			}
			
			.gztantxt{
				margin-top: 30upx;
				font-size: 20upx;
			}
		}
		.hand{
			width: 100%;
			margin-top: 30upx;
		}
		.show {
			margin-top: 85upx;
			width: 686upx;
			margin: 0 auto;
			background-color: #3A4044;
			box-sizing: border-box;
			padding: 10upx 20upx;
			border-radius: 16upx;

			.showhand {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 1upx solid #4A4E52;
				padding: 24upx 29upx 12upx 11upx;

				.hleft {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #fff;
				}

				.hright {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #8DC321;
				}
			}

			.showfoot {
				width: 100%;
				box-sizing: border-box;
				padding: 13upx 0upx 24upx 13upx;

				.fleft {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					line-height: 60upx;
					color: #D0D0D0;
					.fleftson{
						padding:0upx 14upx;
						color: #333;
						background-color: #fff;
						border-radius: 5upx;
						margin-left: 30upx;
					}
				}

				.fright {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					margin-top: 14upx;
				}
				
			}
		}
		.notap{
			width: 245upx;
			margin: 0 auto;
			text-align: center;
			margin-top: 300upx;
			image{
				width: 245upx;
				height: 176upx;
				margin-bottom: 36upx;
			}
			font-size: 26upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #6E7071
		}
		.kf{
			/deep/.van-popup {
				border-radius: 36upx;
				overflow-x: hidden;
			}
			.kfmap{
				background-color: #ffffff;
				width: 544upx;
				position: relative;
				padding-bottom: 50upx;
				padding-top: 58upx;
				box-sizing: border-box;
				.one{
					position: absolute;
					top: 30upx;
					right: 30upx;
					image{
						width: 29upx;
						height: 29upx;
					}
				}
				.two{
					text-align: center;
					font-size: 34upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 700;
					color: #111111;
					line-height: 48upx;
				}
				.three{
					margin-top: 44upx;
					text-align: center;
					font-size: 30upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 700;
					color: #3A4044;
					line-height: 42upx;
				}
				.four{
					display: flex;
					padding:0 54upx;
					justify-content: center;
					align-items: center;
					margin-top: 70upx;
					.fourfirst{
						display: flex;
						align-items: center;
						image{
							width: 30upx;
							height: 30upx;
							margin-right: 5upx;
						}
						font-size: 34upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 700;
						color: #3A4044;
						line-height: 48upx;
					}
					.foursecond{
						display: flex;
						align-items: center;
						image{
							width: 35upx;
							height: 29upx;
							margin-right: 5upx;
						}
						font-size: 34upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 700;
						color: #8DC321;
						line-height: 48upx;
					}
					.fourthired{
						width: 1upx;
						height: 55upx;
						background: #EEEEEE;
						margin: 0 48upx;
					}
				}
				.five{
					text-align: center;
					image{
						width: 424upx;
						height: 424upx;
						background: #D4D4D4;
						border-radius: 10upx;
					}
				}
				.six{
					text-align: center;
					font-size: 30upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #EC651C;
					line-height: 49upx;
					margin-top: 50upx;
				}
			}
		}
	}
</style>
